<html>
<head>
<title>如何用 js 等比例缩小放大图片-缩放图片尺寸 </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script language="JavaScript">
var zoomLevel = 0;
var currentWidth = 0;
var currentHeight = 0;
var originalWidth = 0;
var originalHeight = 0;
function initial(){
    currentWidth = document.myImage.width;
    currentHeight = document.myImage.height;
    originalWidth = currentWidth;
    originalHeight = currentHeight;
    update();
}
function zoomIn(){
    document.myImage.width = currentWidth*2;
    document.myImage.height = currentHeight*2;
    zoomLevel = zoomLevel + 1;
    update();
}
function zoomOut(){
    document.myImage.width = currentWidth/2;
    document.myImage.height = currentHeight/2;
    zoomLevel = zoomLevel - 1;
    update();
}
function resetImage(){
    document.myImage.width = originalWidth;
    document.myImage.height = originalHeight;
    zoomLevel = 0;
    update();
}
function update(){
    currentWidth = document.myImage.width;
    currentHeight = document.myImage.height;
    zoomsize.innerText = zoomLevel;
    imgsize.innerText = currentWidth + "X" + currentHeight;
}
</script>
</head>
<body onload="initial()">
<h2>缩放图片尺寸</h2>
<hr>
<div align="left" style="font:10pt;overflow-y:scroll;
   overflow-x:scroll;height=350;width=600">
<img name="myImage" src="http://www.blueidea.com/img/common/logo.gif">
</div>
<hr>
<input type="button" value="放大图片" onclick="zoomIn()">
<input type="button" value="缩小图片" onclick="zoomOut()">
<input type="button" value="重置图片" onclick="resetImage()">
(<span id="zoomsize"></span>) - <span id="imgsize"></span>
</body>
</html>